<template>
	<view class="">
		<back></back>
		<view class="item it_flex">
			<view class="it_left">姓名</view>
			<input type="text" placeholder="请输入姓名" v-model="username" />
		</view>
		<view class="item it_flex">
			<view class="it_left">手机号</view>
			<input type="number" maxlength="11" placeholder="请输入手机号" v-model="mobile" />
		</view>
		<!-- <picker range-key="name" :range="cardlist" @change="changeCard">
			<view class="item it_flex">
				<view class="it_left">提现类型</view>
				<view class="">{{cardname?cardname:'请选择提现类型'}}</view>
			</view>
		</picker> -->
		<picker range-key="name" :range="list" @change="changeBank">
			<view class="item it_flex">
				<view class="it_left">提现类型</view>
				<view class="">{{bankName?bankName:'请选择提现类型'}}</view>
			</view>
		</picker>
		<view class="item it_flex">
			<view class="it_left">账户/账号</view>
			<input type="text" placeholder="请输入账户/账号" v-model="cardCode" />
		</view>
		<!-- <view class="item it_flex" v-if="cardindex==2">
			<view class="it_left">支付宝</view>
			<input type="text" placeholder="请输入支付宝" v-model="cardCode" />
		</view> -->
		<!-- <picker range-key="name" :range="list" @change="changeBank" v-if="cardindex==0">
			<view class="item it_flex">
				<view class="it_left">银行卡</view>
				<view class="">{{bankName?bankName:'请选择银行卡'}}</view>
			</view>
		</picker> -->
		<view class="add btn u-flex-center" @click="getSubmit()">确认修改</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				id: "",
				username: "",
				mobile: "",
				bankCode: "",
				bankName: "",
				cardCode: "",
				cardlist: [{
						name: "账户",
					},
					{
						name: "微信号",
					},
					{
						name: "支付宝",
					}
				],
				cardindex:"",
				cardname:""
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onReady() {
			this.$u.post('/api/shop/get_brank_code', {}).then(res => {
				if (res.code == 1) {
					this.list = res.data
				}
			})
			if(this.id){
				this.$u.post('/api/shop/get_shop_account_detail', {
					ids:this.id
				}).then(res => {
					if (res.code == 1) {
						// this.list = res.data
						this.username=res.data.username
						this.mobile=res.data.mobile
						this.bankCode=res.data.bankCode
						this.bankName=res.data.bankName
						this.cardCode=res.data.cardCode
					}
				})
			}
		},
		methods: {
			changeBank(e) {
				this.bankName = this.list[e.detail.value].name
				this.bankCode = this.list[e.detail.value].code
			},
			changeCard(e){
				this.cardname  = this.cardlist[e.detail.value].name
				this.cardindex = e.detail.value
			},
			getSubmit(){
				this.$u.post('/api/shop/edit_shop_account', {
					username:this.username,
					mobile:this.mobile,
					bankCode:this.bankCode,
					bankName:this.bankName,
					cardCode:this.cardCode,
					account_id:this.id?this.id:''
				}).then(res => {
					if (res.code == 1) {
						uni.showModal({
							title:'修改成功',
							showCancel:false,
							success() {
								uni.navigateBack({
									delta:1
								})
							}
						})
					}else{
						uni.showModal({
							title:res.msg,
							showCancel:false,
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		padding: 33rpx;
	}
</style>
<style lang="scss" scoped>
	.top {
		padding: 30rpx 0;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.radius {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			margin-right: 10rpx;
			border: 1rpx solid #888;
		}

		.rad_css {
			background: #606DCE;
			border: 1rpx solid #606DCE;
		}

		.grey {
			color: #333;
			font-size: 28rpx;
		}
	}

	.haedimg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.it_flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item_pad_bot {
		padding-bottom: 10rpx !important;
	}

	.item {
		padding: 32rpx 30rpx;
		background: #fff;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;

		.it_left {
			font-weight: bold;
			color: #222;
		}

		input {
			font-size: 28rpx;
			text-align: right;
		}

		.it_right {
			display: flex;
			align-items: center;

			text {
				color: #222;
			}

			.it_lef_img {
				width: 10rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}

			.it_rig_img {
				width: 220rpx;
				height: 220rpx;
				border-radius: 20rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
			}
		}

		.it_right_duo {
			border-bottom: 1rpx solid #DFDFDF;

			&:last-child {
				border: none;
			}
		}

		.it_tit {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid #F5F5F5;

			.it_grey {
				font-size: 28rpx;
				color: #888;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}
			}

			input {
				font-size: 28rpx;
				font-weight: bold;
				text-align: left;
			}
		}

		.it_specs {
			color: #222;
			display: flex;
			font-size: 24rpx;
			align-items: center;
			padding: 10rpx 24rpx;
			background: #F5F5F5;
			border-radius: 26rpx;
			margin-right: 30rpx;
			margin-bottom: 20rpx;

			.it_sp_line {
				width: 2rpx;
				height: 24rpx;
				margin: 0 20rpx 0 24rpx;
			}

			.it_sp_cha {
				width: 20rpx;
				height: 20rpx;
			}

			.it_sp_plus {
				width: 20rpx;
				height: 20rpx;
				margin-right: 20rpx;
			}

			.it_sp_gre {
				color: #606DCE;
			}
		}

		.it_specs input {
			flex: 1;
			max-width: 60rpx;
		}

		.it_pri {
			font-size: 24rpx;
			color: #222;
			padding: 10rpx 48rpx;
			background: #F5F5F5;
			border-radius: 26rpx;
			margin-right: 30rpx;
		}

		.it_ban {
			width: 50%;
			padding: 30rpx 0;

			input {
				flex: 1;
				text-align: left;
				margin-left: 20rpx;
			}
		}
	}

	.add {
		width: 200rpx;
		height: 60rpx;
		font-size: 28rpx;
		color: #FFF;
		margin: 0 auto;
		margin-top: 30rpx;
		background: linear-gradient( 98deg, #5D64CA 0%, #6F9BDF 100%);
		border-radius: 40rpx;
	}

	.btn {
		width: 630rpx;
		height: 80rpx;
		margin-top: 157rpx;
	}
</style>